<template>
    <div>
        <h3 class="title"> {{photoinfo.title}} </h3>
        <span>
            <p> 发表时间：{{photoinfo.add_time | dataFormat}} </p>
            <p> 点击:{{photoinfo.click}}次 </p>
        </span>
        <hr>
        <!-- 缩略图区域 -->
        <div class="thumb-img-list">
            <img :slides="photolist" @close="handleClose" v-for="(item,index) in photolist" :key="index" :src="item.src" >    
        </div>
        <!-- 内容区域 -->
        <div class="content" v-html="photoinfo.content"></div>
        <!-- 发表言论 -->
        <comment></comment>
    </div>
</template>

<script>
// 导入评论组件
import comment from '../sub-components/Comment.vue'
export default {
    data() {
        return {
            photoinfo: {},
            photolist: [] 
        }
    },
    created() {
        this.getPhotoInfo(),
        this.getThumbImg()
    },
    methods: {
        async getPhotoInfo(){
            const {data} = await this.$http.get('/api/getimageinfo/' + this.id)
            // console.log(data);
            if(data.status === 0) 
            return (this.photoinfo = data.message[0])
        },
        async getThumbImg(){
            // 缩略图数据
            const {data} = await this.$http.get("/api/getthumimages/" + this.id)
            console.log(data);
            if(data.status === 0){
                data.message.forEach(item => {
                    item.w = 600
                    item.h = 400
                });
            }
            this.photolist = data.message

        },
        handleClose () {
        console.log('close event')
      }
    },
    props: ["id"],
    components: {
        comment: comment
    }
}
</script>

<style lang="scss" scoped>
    h3{
        padding-top: 10px;
        color: #26a2ff;
        text-align: center;
        font-size: 15px;
    }
    span{
        padding-top: 5px;
        display: flex;
        justify-content: space-between;
        p{
            font-size: 13px;
        }
    }
    .content{
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 2px;
        line-height: 1.5;
    }
</style>